<template>
    <div class="report">
        <back :backTitle="name+'学业诊断'" :noBack="true"/>
        <div class="report-list">
             <template v-for="item in reportList" v-if="reportList.length>0" > 
                <router-link tag="div" :to="{path:'/h-result',query:{reportId:item.reportId}} ">
                    <report-item :data="item"></report-item>
                </router-link>
            </template>
        </div>
       
        <loading ref="loadings" />
        <div class="empty" v-if="reportList.length==0">
            <empty text="没有报告数据哦" />
        </div>
    </div>
</template>
<script>
import Back from '../common/Back'
import ReportItem from '../report/ReportItem'
import Loading from '../common/loading'
import Empty from '../common/Empty'

import io from '../../lib/io'
import util from '../../lib/util'
import loadMore from '../../lib/myDragLoader.js'
export default {
  name: 'report',
  components:{
      Back,
      ReportItem,
      Loading,
      Empty
      
  },
    data: function() {
        return {
            showMask:false,
            pageIndex:1,
            pageSize:10,
            name:this.$route.query.name,
            phoneNo:this.$route.query.phoneNo,
            reportList:[],
            hasNext:true,
        }
    },
    created(){
        this.getStudentReport()
    },
    mounted(){
            this.more()
    },
    beforeDestroy() {
        loadMore.rmLoadMore(".report-list");
        $('.more').remove()

    },
    deactivated(){
        loadMore.rmLoadMore("report-list");
        $('.more').remove()
    },
    watch:{
        showMask:function(val){
            if(val){
                loadMore.rmLoadMore("report-list");
                $('.more').remove()
            }else{
                this.more()
            }
        }
    },
    methods:{
        more(){
            console.log('xx')
            loadMore.loadMore(".report-list",'', ()=> {
                if (this.hasNext) {
                    this.getStudentReport()
                } else {
                    toast('没有更多咯')
                }
            },'more more-report')
        },
        showMaskFun(){
            if(this.showMask){
                
                this.showPeroid = false 
                setTimeout(()=>{
                    this.showMask = false

                },500)
            }else{
                this.showMask = true
                this.showPeroid = true
            }
           

        },
        closeMaskFun(){
            this.showPeroid = false
            setTimeout(()=>{
                this.showMask = false
            },500)

        },
        getStudentReport(){
            if(this.$refs.loadings){
                this.$refs.loadings.show = true
            }
            let param = {
                pageIndex:this.pageIndex,
                pageSize:this.pageSize,
                phoneNo:this.phoneNo,
                name:this.name,
                sysCode:'0003',
            }
            io.post(io.reportListOfStudent,param,(ret)=>{
                if(ret.success){
                    
                    if(this.$refs.loadings){
                        this.$refs.loadings.show = false;
                    }
                    if(ret.data.list.length<=0){
                        this.hasNext = false
                        return 
                    }
                    this.pageIndex++
                    this.reportList.push.apply(this.reportList,ret.data.list)


                }else{
                    alert(ret.desc)
                    if(ret.desc.indexOf('没找到该学生')>-1){
                        setTimeout(()=>{
                            window.history.back(-1)
                        },2000)
                    }
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.report{
    background:#f8f8f8;
    .peroid{
        position:fixed;
        width:100%;
        left:0;
        top:0.92rem;
        height:0.76rem;
        background:#fff;
        z-index:100;
        .show-div{
            width:100%;
            height:100%;
            line-height:0.76rem;
            text-align: center;
            font-size:28px;
            color:#3271f1;
        }
        .masks{
            width:100%;
            height:calc(100% - 0.92rem - 0.76rem);
            background:rgba(0,0,0,0.6);
            position:fixed;
            left:0;
            top:calc(0.92rem + 0.76rem);
            z-index:1000;
            ul{
                background:#fff;
                max-height:100%;
                overflow-y: auto;
                -webkit-transform-origin: top left;

                li{
                    height:0.76rem;
                    line-height: 0.76rem;
                    font-size:0.26rem;
                    color:#333;
                    padding-left: 0.3rem;
                    &.active{
                        color:#3271f1;
                        background:#e8e8e8;
                    }

                }
                li+li{
                    border-top: 1px solid #e8e8e8;
                }
            }

        }
        
    }
    .empty{
        padding-top:0.2rem;
    }
}
.peroid-enter-active{
    animation: bounce-in .3s;
}
.peroid-leave-active{
    animation: bounce-in .3s reverse;
}
@keyframes bounce-in {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}
</style>

